<style scoped>
.center {
  width: 240px;
  position: absolute;
  left: 50%;
  margin-left: -120px;
  top: 20%;
}

.box {
  height: 750px;
  position: relative;
}

.center .car {
  background-color: rgba(216, 237, 255, 0.3);
  border: none;
  height: 380px;
}

</style>
<template>
  <div class="box" :style="backgroundDiv">
    <div class="center">
      <el-card shadow="always" class="car">
        <div style="height: 100px; position: relative;">
          <div style="position:absolute;left: 25%;top: 15px">
            <p style="display:inline-block;font-weight: bold;font-size: 18px;font-family: 'Arial Black';color: #20364d">
              MyWind
            </p>
            <el-image style="width:30px;height: 30px" :src="headfc"></el-image>
          </div>
        </div>


        <el-form :model="loginForm" status-icon :rules="loginFormRules" ref="loginForm" class="demo-loginForm"
                 style="margin-top: 10px">
          <el-form-item prop="email">
            <el-input type="text" v-model="loginForm.email" clearable placeholder="邮箱" size="medium">
              <template slot="prepend"><i class="el-icon-user-solid"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" clearable placeholder="密码" size="medium">
              <template slot="prepend"><i class="el-icon-key"></i></template>
            </el-input>
          </el-form-item>


          <el-form-item>
            <div style="position: relative;left: 23%">
              <el-button type="primary" @click="loginUser('loginForm')" round icon="el-icon-thumb"
                         size="mini"></el-button>
              <el-button @click="resetForm('loginForm')" round icon="el-icon-refresh-right" size="mini"></el-button>
            </div>

          </el-form-item>
          <el-form-item>
            <div style="position: relative;left: 36%">
              <el-button type="danger" icon="el-icon-warning-outline" round size="mini"></el-button>
            </div>
          </el-form-item>


        </el-form>
      </el-card>
    </div>

222
    <div
      style="display: flex;position: fixed;left: 0;right: 0;bottom: 20px;align-items: center;justify-content: center">
      <el-image :src="beian"></el-image>
      <a style="color: white;font-size: 12px;margin-left: 8px" href="#" @click="showBeianMess">闽ICP备2020019377号</a>
    </div>

  </div>
</template>
<script>

import rainbow from "components/rainbow/rainbow";
import headfc from 'svg/headfc.svg'
import beian from 'image/beian.png'
import {request} from 'network/request.js'

export default {
  name: "login",
  components: {
    rainbow
  },
  data() {
    return {
      backgroundDiv: {
        backgroundImage: 'url(' + require('image/bg2.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },


      headfc: headfc,
      beian: beian,
      loginForm: {
        email: '',
        password: '',
      },
      loginFormRules: {
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],

      },
    }
  },
  created() {
  },

  methods: {
    loginUser(ref) {
      this.$refs[ref].validate((valid) => {
        if (valid) {
          let self = this
          request({url: '/login/loginUser', data: self.loginForm}).then(res => {
            if (res.data.stateCode == '200') {
              self.$message.success(res.data.msg)
              sessionStorage.setItem("email", res.data.data.email)
              sessionStorage.setItem("uname", res.data.data.username)
              sessionStorage.setItem("uid", res.data.data.id)
              self.$router.push({
                path: '/home'
              })
            } else {
              self.$message.error(res.data.msg)
            }
          })
        }

      });
    },

    resetForm(ref) {
      this.$refs[ref].resetFields();
    },

    showBeianMess() {
      window.open('http://icp.chinaz.com/home/info?host=mywind.xyz')
    }
  },
  watch: {},
  computed: {},
  mounted() {
  },
}
</script>


